<template>
	<md-card style="margin:8px 0;">
		<md-card-header md-alignment="space-between" style="display:flex;">
			<span
				class="md-title md-title-text"
				:title="labelName+getLangText(label.labelStyle)"
			>{{labelName}}{{getLangText(label.labelStyle)}}</span>
			<span style="flex:1;text-align:right;">
				<!-- <md-button class="md-icon-button" @click="sendStyle" v-show="isShow">
					<i class="iconfont iconsave"></i>
				</md-button>-->
				<md-button :class="['md-icon-button',isShow?'md-primary':'']" @click="sendStyle">
					<i :class="['iconfont', isShow?'iconsave':'iconshezhi2']"></i>
				</md-button>
			</span>
		</md-card-header>
		<md-card-content v-if="isShow">
<div class="table-row-item">
					<span>{{getLangText(label.label)+getLangText(label.show)}}:</span>
					<span>
						{{getLangText(label.hide)}}
						<md-switch v-model="labelStyle.show"></md-switch>
						{{getLangText(label.show)}}
					</span>
				</div>

				<md-field>
					<label>{{getLangText(label.label)+getLangText(label.position)}}</label>
					<md-select v-model="labelStyle.position">
						<md-option :key="item.en" :value="item.en" v-for="item in labelPosition">{{getLangText(item)}}</md-option>
					</md-select>
				</md-field>

				<md-field>
					<label>{{getLangText(label.label)+getLangText(label.distance)}}</label>
					<md-input v-model="labelStyle.distance"></md-input>
				</md-field>

				<md-field>
					<label>{{getLangText(label.label)+getLangText(label.rotate)}}</label>
					<md-input v-model="labelStyle.rotate"></md-input>
				</md-field>
				<md-card style="white-space:normal;margin:8px 0;">
					<md-card-content>
						<div v-html="getLangText(label.formatterTip)"></div>
					</md-card-content>
				</md-card>
				<md-field>
					<label>{{getLangText(label.label)+getLangText(label.formatter)}}</label>
					<md-textarea v-model="labelStyle.formatter"></md-textarea>
				</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.color)}}:</span>
				<span>
					<span
						class="color-span"
						:style="{background:labelStyle.color}"
						@click="showColorPicker('color')"
					></span>
					{{labelStyle.color}}
				</span>
			</div>
			<color-picker
				:lang-type="langType"
				:rgba="labelStyle.color"
				@color-result="onColorPicker"
				:show-picker="picker.show&&picker.current=='color'"
			></color-picker>

			<md-field>
				<label>{{getLangText(label.fontStyle)}}</label>
				<md-select v-model="labelStyle.fontStyle">
					<md-option :key="item.en" :value="item.en" v-for="item in fontStyle">{{getLangText(item)}}</md-option>
				</md-select>
			</md-field>

			<md-field>
				<label>{{getLangText(label.fontWeight)}}</label>
				<md-select v-model="labelStyle.fontWeight">
					<md-option :key="item.en" :value="item.en" v-for="item in fontWeight">{{getLangText(item)}}</md-option>
				</md-select>
			</md-field>

			<md-field>
				<label>{{getLangText(label.fontFamily)}}</label>
				<md-select v-model="labelStyle.fontFamily">
					<md-option :key="item.en" :value="item.en" v-for="item in fontFamily">{{getLangText(item)}}</md-option>
				</md-select>
			</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.bgColor)}}:</span>
				<span>
					<span
						class="color-span"
						:style="{background:labelStyle.backgroundColor}"
						@click="showColorPicker('backgroundColor')"
					></span>
					{{labelStyle.backgroundColor}}
				</span>
			</div>

			<color-picker
				:lang-type="langType"
				:rgba="labelStyle.backgroundColor"
				@color-result="onColorPicker"
				:show-picker="picker.show&&picker.current=='backgroundColor'"
			></color-picker>

			<md-field>
				<label>{{getLangText(label.lineHeight)}}</label>
				<md-input v-model="labelStyle.lineHeight"></md-input>
			</md-field>

			<md-field>
				<label>{{getLangText(label.align)}}</label>
				<md-select v-model="labelStyle.align">
					<md-option :key="item.en" :value="item.en" v-for="item in align">{{getLangText(item)}}</md-option>
				</md-select>
			</md-field>
			<md-field>
				<label>{{getLangText(label.verticalAlign)}}</label>
				<md-select v-model="labelStyle.verticalAlign">
					<md-option :key="item.en" :value="item.en" v-for="item in verticalAlign">{{getLangText(item)}}</md-option>
				</md-select>
			</md-field>

			<md-field>
				<label>{{getLangText(label.borderWidth)}}</label>
				<md-input v-model="labelStyle.borderWidth"></md-input>
			</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.borderColor)}}:</span>
				<span>
					<span
						class="color-span"
						:style="{background:labelStyle.borderColor}"
						@click="showColorPicker('borderColor')"
					></span>
					{{labelStyle.borderColor}}
				</span>
			</div>

			<color-picker
				:lang-type="langType"
				:rgba="labelStyle.borderColor"
				@color-result="onColorPicker"
				:show-picker="picker.show&&picker.current=='borderColor'"
			></color-picker>

			<md-field>
				<label>{{getLangText(label.borderRadius)}}</label>
				<md-input v-model="labelStyle.borderRadius"></md-input>
			</md-field>

			<md-field>
				<label>{{getLangText(label.shadowBlur)}}</label>
				<md-input v-model="labelStyle.shadowBlur"></md-input>
			</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.shadowColor)}}:</span>
				<span>
					<span
						class="color-span"
						:style="{background:labelStyle.shadowColor}"
						@click="showColorPicker('shadowColor')"
					></span>
					{{labelStyle.shadowColor}}
				</span>
			</div>

			<color-picker
				:lang-type="langType"
				:rgba="labelStyle.shadowColor"
				@color-result="onColorPicker"
				:show-picker="picker.show&&picker.current=='shadowColor'"
			></color-picker>

			<md-field>
				<label>{{getLangText(label.shadowOffsetX)}}</label>
				<md-input v-model="labelStyle.shadowOffsetX"></md-input>
			</md-field>
			<md-field>
				<label>{{getLangText(label.shadowOffsetY)}}</label>
				<md-input v-model="labelStyle.shadowOffsetY"></md-input>
			</md-field>

			<md-field>
				<label>{{getLangText(label.textBorderWidth)}}</label>
				<md-input v-model="labelStyle.textBorderWidth"></md-input>
			</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.textBorderColor)}}:</span>
				<span>
					<span
						class="color-span"
						:style="{background:labelStyle.textBorderColor}"
						@click="showColorPicker('textBorderColor')"
					></span>
					{{labelStyle.textBorderColor}}
				</span>
			</div>

			<color-picker
				:lang-type="langType"
				:rgba="labelStyle.textBorderColor"
				@color-result="onColorPicker"
				:show-picker="picker.show&&picker.current=='textBorderColor'"
			></color-picker>

			<md-field>
				<label>{{getLangText(label.textShadowBlur)}}</label>
				<md-input v-model="labelStyle.textShadowBlur"></md-input>
			</md-field>

			<div class="table-row-item">
				<span>{{getLangText(label.textShadowColor)}}:</span>
				<span>
					<span
						class="color-span"
						:style="{background:labelStyle.textShadowColor}"
						@click="showColorPicker('textShadowColor')"
					></span>
					{{labelStyle.textShadowColor}}
				</span>
			</div>

			<color-picker
				:lang-type="langType"
				:rgba="labelStyle.textShadowColor"
				@color-result="onColorPicker"
				:show-picker="picker.show&&picker.current=='textShadowColor'"
			></color-picker>

			<md-field>
				<label>{{getLangText(label.textShadowOffsetX)}}</label>
				<md-input v-model="labelStyle.textShadowOffsetX"></md-input>
			</md-field>
			<md-field>
				<label>{{getLangText(label.textShadowOffsetY)}}</label>
				<md-input v-model="labelStyle.textShadowOffsetY"></md-input>
			</md-field>
		</md-card-content>
	</md-card>
</template>
<script>
	import ColorPicker from "@/components/comp/ColorPicker";
	export default {
		name: "LabelStyle",
		props: {
			langType: {
				type: String,
				default: window.localStorage.getItem("langType")
			},
			labelName: {
				type: String,
				default: ""
			},
			option: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		components: {
			"color-picker": ColorPicker
		},
		data: () => ({
			label: {
				labelStyle: { zh: "标签样式", en: "LabelStyle" },
				color: { zh: "文字颜色", en: "textColor" },
				fontStyle: { zh: "字体风格", en: "fontStyle" },
				fontWeight: { zh: "字体粗细", en: "fontWeight" },
				fontFamily: { zh: "字体系列", en: "fontFamily" },
				fontSize: { zh: "字体大小", en: "fontSize" },
				lineHeight: { zh: "行高", en: "lineHeight" },
				bgColor: { zh: "字体背景", en: "fontBg" },
				borderColor: { zh: "边框颜色", en: "borderColor" },
				borderWidth: { zh: "边框线宽", en: "borderWidth" },
				borderRadius: { zh: "圆角半径", en: "borderRadius" },
				shadowBlur: { zh: "阴影模糊大小", en: "shadowBlur" },
				shadowColor: { zh: "阴影颜色", en: "shadowColor" },
				shadowOffsetX: { zh: "阴影水平偏移", en: "shadowOffsetX" },
				shadowOffsetY: { zh: "阴影垂直偏移", en: "shadowOffsetY" },
				textBorderColor: { zh: "文字描边颜色", en: "textBorderColor" },
				textBorderWidth: { zh: "文字描边宽度", en: "textBorderWidth" },
				textShadowBlur: { zh: "文字阴影长度", en: "textShadowBlur" },
				textShadowColor: { zh: "文字阴影颜色", en: "textShadowColor" },
				textShadowOffsetX: { zh: "文字阴影X偏移", en: "textShadowOffsetX" },
				textShadowOffsetY: { zh: "文字阴影Y偏移", en: "textShadowOffsetY" },
				padding: { zh: "内边距", en: "padding" },
				align: { zh: "水平对齐", en: "align" },
				verticalAlign: { zh: "垂直对齐", en: "verticalAlign" },
				label: { zh: "标签", en: "label " },
				position: { zh: "位置", en: "position" },
				distance: { zh: "与图形距离", en: "distance" },
				rotate: { zh: "旋转", en: "rotate" },
				show: { zh: "显示", en: "show" },
				hide: { zh: "隐藏", en: "hide" },
				yes: { zh: "是", en: "yes" },
				no: { zh: "否", en: "no" },
				formatter: { zh: "模板", en: "formatter" },
				formatterTip:{zh:'<p><span style="font-weight:bold;">折线图、柱状图:</span>{a}(系列名称),{b}(类目值),{c}(数值),{d}(无)</p>'+
						'<p><span style="font-weight:bold;">散点图:</span>{a}(系列名称),{b}(数据名称),{c}(数值数组),{d}(无)</p>'+
						'<p><span style="font-weight:bold;">地图:</span>{a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)</p>'+
						'<p><span style="font-weight:bold;">饼图、仪表盘、漏斗图:</span>{a}(系列名称),{b}(数据项名称),{c}(数值),{d}(百分比)</p>',
						en:'<p><span style="font-weight:bold;">line、bar:</span>{a}(series),{b}(category),{c}(value),{d}(none)</p>'+
						'<p><span style="font-weight:bold;">scatter:</span>{a}(series),{b}(dataName),{c}(value),{d}(none)</p>'+
						'<p><span style="font-weight:bold;">map:</span>{a}(series),{b}(areaName),{c}(mergeValue), {d}(none)</p>'+
						'<p><span style="font-weight:bold;">pie、gauge、funnel:</span>{a}(series),{b}(itemName),{c}(value),{d}(percentage)</p>'}
			},
			isShow: false,
			labelPosition: [
				{ zh: "上侧", en: "top" },
				{ zh: "左侧", en: "left" },
				{ zh: "右侧", en: "right" },
				{ zh: "下侧", en: "bottom" },
				{ zh: "内部", en: "inside" },
				{ zh: "内左", en: "insideLeft" },
				{ zh: "内右", en: "insideRight" },
				{ zh: "内上", en: "insideTop" },
				{ zh: "内下", en: "insideBottom" },
				{ zh: "内上左", en: "insideTopLeft" },
				{ zh: "内下左", en: "insideBottomLeft" },
				{ zh: "内上右", en: "insideTopRight" },
				{ zh: "内下右", en: "insideBottomRight" }
			],
			fontStyle: [
				{ zh: "正常", en: "normal" },
				{ zh: "斜体", en: "italic" },
				{ zh: "倾斜", en: "oblique" }
			],
			fontWeight: [
				{ zh: "正常", en: "normal" },
				{ zh: "粗体", en: "bold" },
				{ zh: "浑厚", en: "bolder" },
				{ zh: "幼细", en: "lighter" }
			],
			fontFamily: [
				{ zh: "无衬线体", en: "sans-serif" },
				{ zh: "衬线体", en: "serif" },
				{ zh: "单间隔体", en: "monospace" },
				{ zh: "方头体", en: "Arial" },
				{ zh: "等宽体", en: "Courier New" },
				{ zh: "微软雅黑", en: "Microsoft YaHei" }
			],
			align: [
				{ zh: "左对齐", en: "left" },
				{ zh: "居中", en: "center" },
				{ zh: "右对齐", en: "right" }
			],
			verticalAlign: [
				{ zh: "上对齐", en: "top" },
				{ zh: "居中", en: "middle" },
				{ zh: "下对齐", en: "bottom" }
			],
			labelStyle: {
				show: false,
				position: "top",
				distance: 5,
				rotate: "",
				color: "#333",
				fontStyle: "normal",
				fontWeight: "normal",
				fontFamily: "sans-serif",
				fontSize: 12,
				align: "",
				verticalAlign: "",
				lineHeight: "",
				backgroundColor: "transparent",
				borderColor: "#ccc",
				borderWidth: 0,
				borderRadius: 0,
				shadowBlur: "",
				shadowColor: "",
				shadowOffsetX: 0,
				shadowOffsetY: 0,

				padding: 0,

				textBorderColor: "#ccc",
				textBorderWidth: 0,
				textShadowBlur: "",
				textShadowColor: "",
				textShadowOffsetX: 0,
				textShadowOffsetY: 0
			},
			//颜色选择器
			picker: {
				show: false,
				current: ""
			},
			originOption:'',
			isParse:false,
		}),
		watch: {
			isShow() {
				if (this.isShow) {
					this.parseObj();					
				}else{
					this.picker.show = false;
				}

			},		
			labelStyle:{
				deep:true,
				handler(){
					if(this.isShow&&!this.isParse)
					this.$emit("label-style-result", JSON.parse(JSON.stringify(this.labelStyle)));
				}
			}	
		},
		methods: {
			showColorPicker(tag) {
				if (tag != this.picker.current || !this.picker.show) {
					this.picker.current = tag;
					this.picker.show = true;
				} else {
					this.picker.show = false;
				}
			},
			onColorPicker(op) {
				if (this.picker.current) this.labelStyle[this.picker.current] = op.rgba;
			},

			sendStyle() {
				this.isShow = this.isShow ? false : true;
				if (!this.isShow) {
					this.$emit("label-style-result", JSON.parse(JSON.stringify(this.labelStyle)));
				}
			},

			parseObj() {
				if(!this.option||JSON.stringify(this.option)=='{}')return;
				this.isParse=true;
				for (var key in this.option) {
					this.labelStyle[key] = this.option[key];
				}
				this.originOption=JSON.stringify(this.labelStyle);
				var that=this;
				setTimeout(() => {
					that.isParse=false;
				}, 100);
			},
		colseOption(){
			this.isShow=false;
			if (this.originOption!=JSON.stringify(this.labelStyle)) {			
			this.$emit("label-style-result", JSON.parse(JSON.stringify(this.labelStyle)));
			}
			},
			listenEvent(){
				this.app.$on('close-option',this.colseOption);
			},
			offEvent(){
			this.app.$off('close-option',this.colseOption);
			}
		},
		mounted() {
			this.listenEvent();
			
		},
		beforeDestroy(){
			this.offEvent();
		}
	};
</script>

